<template>
  <view class="card-container">
    <view class="title-img-wrap">
      <view class="card-img" v-if="mode === 3 || mode === 4">
        <image 
          :src="getImageUrl()" 
          class="img"
          mode="widthFix"
        ></image>
      </view>
      <text class="card-title">{{ title }}</text>
    </view>
    <view class="meta-info">
      <view class="meta-left">
        <text class="tag-top" v-if="isTop">置顶</text>
        <text class="tag-ad" v-if="adText">{{ adText }}</text>
        <text class="meta-author" v-if="author">{{ author }}</text>
        <text class="meta-comments" v-if="comments > 0">{{ comments }}评</text>
      </view>
      <text class="meta-time" v-if="timedata">{{ timedata }}</text>
    </view>
    <view class="ad-subtext" v-if="mode === 4 && adSubText">
      <text class="ad-subtext-content">{{ adSubText }}</text>
    </view>
    <view class="search-tags" v-if="showSearch">
      <text class="search-label">搜索：</text>
      <text class="tag-item" v-if="tag1">{{ tag1 }}</text>
      <text class="tag-item" v-if="tag2">{{ tag2 }}</text>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      defaultPic: "/static/logo.png"
    };
  },
  props: {
    title: {
      type: String,
      default: "新闻标题",
      required: true
    },
    author: {
      type: String,
      default: "",
      required: false
    },
    comments: {
      type: Number,
      default: 0,
      required: false
    },
    timedata: {
      type: String,
      default: "2000.0.0",
      required: false
    },
    isTop: {
      type: Boolean,
      default: false,
      required: false
    },
    showSearch: {
      type: Boolean,
      default: false,
      required: false
    },
    tag1: {
      type: String,
      default: "",
      required: false
    },
    tag2: {
      type: String,
      default: "",
      required: false
    },
    mode: {
      type: Number,
      default: 1,
      required: true
    },
    adPic: {
      type: String,
      default: "",
      required: false
    },
    adText: {
      type: String,
      default: "",
      required: false
    },
    adSubText: {
      type: String,
      default: "",
      required: false
    }
  },
  methods: {
    getImageUrl() {
      switch (this.mode) {
        case 3: 
          return "/static/j-16.jpg";
        case 4: 
          return this.adPic || "/static/ad-logo.png";
        default: 
          return this.defaultPic;
      }
    }
  }
};
</script>

<style scoped>
.card-container {
  background-color: #fff;
  border-radius: 16rpx;
  padding: 20rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
}

.title-img-wrap {
  display: flex;
  align-items: flex-start;
  gap: 16rpx;
  margin-bottom: 16rpx;
}
.card-img {
  width: 160rpx;
  height: 160rpx;
  flex-shrink: 0;
}
.img {
  width: 100%;
  height: 100%;
  border-radius: 8rpx;
  object-fit: cover;
}
.card-title {
  font-size: 28rpx;
  font-weight: 600;
  color: #333;
  line-height: 44rpx;
  flex: 1;
  display: -webkit-box; 
  -webkit-line-clamp: 3; 
  -webkit-box-orient: vertical; 
  overflow: hidden; 
}

.meta-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 22rpx;
  color: #999;
  margin-bottom: 16rpx;
}
.meta-left {
  display: flex;
  align-items: center;
  gap: 16rpx;
}
/* 关键修改：置顶标签改为红色背景+白色文字（原先是红色文字） */
.tag-top {
  background-color: #ff4d4f;
  color: #fff;
  padding: 4rpx 12rpx;
  border-radius: 12rpx;
  font-weight: 500;
}
.tag-ad {
  background-color: #f5f5f5;
  color: #999;
  padding: 4rpx 12rpx;
  border-radius: 12rpx;
}
.meta-author {
  color: #666;
  font-weight: 500;
}
.meta-comments {
  color: #666;
}
.meta-time {
  color: #999;
}

.ad-subtext {
  display: flex;
  align-items: center;
  gap: 0; 
  font-size: 22rpx;
  color: #666;
  margin-bottom: 16rpx;
}
.ad-subimg {
  display: none;
}
.ad-subtext-content {
  color: #666;
}
.search-tags {
  display: flex;
  align-items: center;
  gap: 16rpx;
  font-size: 22rpx;
  color: #999;
}
.search-label {
  color: #999;
}
.tag-item {
  background-color: #f5f5f5;
  color: #666;
  padding: 6rpx 16rpx;
  border-radius: 16rpx;
}
</style>